<template>
  <div class="column">
    <div class="ui raised fluid link card">
      <div class="content">
        <div class="header"><a :href="url.urlAddress" target="_blank">{{url.urlTitle}}</a></div>
        <div class="meta">
          <span class="category">{{url.catalogId}}</span>
        </div>
        <div class="description" style="height: 60px;">
          <p>{{url.urlDesc}}</p>
        </div>
      </div>
      <div class="extra content">
      <span class="left floated like" @click="love(url.urlTitle,url.urlAddress,$event)">
      <i class="like icon"></i>
        favorite
      </span>
        <div class="right floated author">
          <Avatar :style="color">{{url.urlTitle}}</Avatar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Bus from 'bus'
  export default {
    name: "appCard",
    props: [
      'url'
    ],
    computed: {
      color: function () {
        return {background: this.ColorList[this.getRandomInt() % 3].toString()}
      }
    },
    data() {
      return {
        ColorList: ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
      }
    },
    methods: {
      getRandomInt() {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
      },
      love(name, address, event) {
        $(event.currentTarget).find('i').css('color', 'red');
        Bus.$emit('like',{name:name,address:address})
      }
    }
  }
</script>

<style scoped>

</style>
